<template>
  <div class="page-content">
    <el-card class="box-card" style="height:100%;" :body-style="{height:'100%',position:'relative'}">
      <div class="potree_container" style="width: 100%; height: 100%; left: 0px; top: 0px; ">
        <div id="potree_render_area" style="background-color: #000;"></div>
        <div id="potree_sidebar_container"> </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// import { getInfo } from '@/api/user' 接口引入
export default {
  name: 'Model',
  data() {
    return {
      
    }
  },
  computed: {

  },
  mounted() {
    window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
		
		viewer.setEDLEnabled(false);
		viewer.setFOV(60);
		viewer.setPointBudget(1_000_000);
		viewer.loadSettingsFromURL();
		viewer.setBackground("skybox");
		
		// viewer.setDescription("Point cloud courtesy of <a target='_blank' href='https://www.sigeom.ch/'>sigeom sa</a>");
		
		viewer.loadGUI(() => {
			viewer.setLanguage('en');
			$("#menu_tools").next().show();
			$("#menu_clipping").next().show();
      $("#potree_quick_buttons").hide();
			// viewer.toggleSidebar();
		});
		
		// Load and add point cloud to scene
		Potree.loadPointCloud("/static/metadata.json", "sigeom.sa", e => {
			let scene = viewer.scene;
			let pointcloud = e.pointcloud;
			
			let material = pointcloud.material;
			material.size = 1;
			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
			material.shape = Potree.PointShape.SQUARE;
			
			scene.addPointCloud(pointcloud);
			
			viewer.fitToScreen();
			// scene.view.setView(
			// 	[589974.341, 231698.397, 986.146],
			// 	[589851.587, 231428.213, 715.634],
			// );
		});
  },
  beforeDestroy() {
    
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
::v-deep .video-content{
  width: 100%;
  height:100%;
}
</style>